import React from 'react';
import { Layout } from 'antd';
import Logo from '../imgs/logo.jpg';
import { Menu } from 'antd';
import '../styles/index.scss'
import '../font_icon/iconfont.css'
import { useNavigate,Outlet } from 'react-router-dom';

// 导入二级组件
// import Home from './Index/Home';

const { Header, Footer, Sider, Content } = Layout;
// 用interface声明对象类型
interface Props{

}
interface MenuItem{
    item:object,
    key:string
}


 
function Index(props:Props) {
    var navigate = useNavigate();
    var handleClick=function({item,key}:MenuItem){
        console.log(key);
        navigate(key)
      
    }
    var handleClick2=()=>{
        navigate('/login')

    }
    return (
        <div className='index'>
          
            <Layout>
                <Header className='myheader'>
                    <div className='left'>
                        <img src={Logo} alt="" />
                        <span className='caochu'>仓储管理系统</span>
                        {/* 水平导航菜单 */}
                        <Menu theme='light' mode="horizontal" defaultSelectedKeys={['/index/home']} onClick={handleClick}>
                            <Menu.Item key="/index/home/chart" >首页</Menu.Item>
                        </Menu>
                    </div>
                      <div className='right'>
                        <span className='xtsz'>系统设置</span><span className='iconfont icon-yonghu'></span>
                        <span onClick={handleClick2} className='tuichu'>退出</span>
                      </div>

                </Header>
                <Content style={{ padding: 20 }}>
                    {/* Outlet 充当路由组件的渲染出口(占位) */}
                    <Outlet />
                </Content>
                  
            </Layout>
        </div>
    );
}

export default Index;